<template>
	<div class="con-z">
		<!-- <div class="left">
			<ConLeft  :msglist="msglist" ></ConLeft>
		</div> -->
		<div class="right">
			<div class="right-top">
				<el-page-header @back="goBack" content="变量模板">
				</el-page-header>
			</div>
			<div class="right-bto">
				<div  class="search flex">
				<!-- <div style="margin-bottom: 20px;">
					 <el-button type="primary" @click="add">添加</el-button>
				</div> -->
				
				</div>
				
			
				
				<div class="main">
					
				<el-table :data="tableData" height="500" stripe style="width: 100%" :header-cell-style="{'text-align':'center'}"
						:cell-style="{'text-align':'center'}" border>
						<el-table-column  prop="title" min-width="150" >
						</el-table-column>
						
						<el-table-column  prop="value" min-width="500" >
							<template slot-scope="scope">
								<span v-if="scope.row.field_type !== 'img'">
									{{scope.row.value || ''}} 
								</span>
								<span v-else>
									
									<img v-if="scope.row.value" :src="imgurl + scope.row.value" alt="" style="width: 80px;height:80px;">
								</span>
							</template>
						</el-table-column>
					<el-table-column label="操作" min-width="150">
						<template slot-scope="scope">
							<el-button type="warning" @click="add(scope.row)">编辑</el-button>
							<!-- <el-button type="danger" @click="clear(scope.row)">删除</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				</div>
		<!-- 	<div class="block" style="margin-top: 18px;">
			    <el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[10]"
					:page-size="10"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			    </el-pagination>
			</div> -->
			
			</div>
			<el-dialog title="添加" :visible.sync="dialogVisible" width="40%">
				<span>
					<el-form ref="form"  :model="form" label-width="140px"  :inline="false">
							<el-form-item label="标题" required disabled="true" >
								 <div>{{form.title}}</div>
							</el-form-item>	
							<div v-if="form.field_type == 'img'">
								<el-form-item label="标题" required disabled="true" >
									 <el-upload class="avatar-uploader" :action="url+'back/common/upload'" :show-file-list="false"
									 	:headers="headers" :on-success="handleAvatarSuccess">
									 	<!-- <img v-if="form.image_url" :src="imgurl+form.image_url" class="avatar"> -->
									 	<el-image
									 	class="avatar"
									 	v-if="form.value"
									 	   style="width: 100%;height: 175px;"
									 	   :src="imgurl+form.value" 
									 	   :preview-src-list="[imgurl+form.value]">
									 	 </el-image>
									 	 <!-- <span v-else class=" avatar-uploader-icon">500 * 500</span> -->
									 	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									 </el-upload>
								</el-form-item>	
								
							</div>
							<div v-else-if="form.field_type == 'string'">
								<el-form-item label="内容" required  >
									 <el-input   v-model="form.value" clearable style="width: 200px;" ></el-input>
								</el-form-item>	 
							</div>
							<div v-else>
								<el-form-item label="内容" required  >
									 <tinymce-editor v-model="form.value" :init="initEditor"  />
								</el-form-item>	 
							</div>
							
					</el-form>
					
				</span> 
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submit()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import setting from '@/config/setting';
	import TinymceEditor from '@/components/TinymceEditor'
	export default{
		components:{
			TinymceEditor
		},
		data(){
			return{
				product_id:'', 
				form:{
				
				},
				dialogVisible:false,
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				tableData:[],
				mode_id:'',
			}
		},
		mounted(){
			this.mode_id = this.$route.query.id
			this.getlist()
			
		},
		methods:{
			add(data){
				this.$set(this,'form',data)
				
				this.dialogVisible = true
			
			},
			handleAvatarSuccess(res) {
				if(res.code == 0){
					this.$message.error(res.msg);
				}
				console.log( res)
				this.$set(this.form, 'value', res.code.url)
			},
			submit(){
			
				this.$http.post(`/back/customconfig/edit`,
					this.form
				).then(res => {
					console.log(res)
					if(res.data.code==1){
						this.$message({
						  type: 'success',
						  message: res.data.msg
						}); 
							this.dialogVisible = false
						this.getlist()
					}
					
				})
			},
			initEditor() {
			  return {
			    height: 400,
			    file_picker_callback: this.file_picker_callback,
			    skin_url: '/tinymce/skins/ui/oxide',
			    content_css: '/tinymce/skins/content/default/content.css',
			    images_upload_handler: (blobInfo, success, error) => {
			      let file = blobInfo.blob();
			      // 使用axios上传
			      const formData = new FormData();
			      formData.append('file', file, file.name);
			      this.$http.post('/back/common/upload', formData).then(res => {
									console.log('上传图片的res',res)
			        if (res.data.code == 1) {
			          success(res.data.data.fullurl);
			        } else {
			          error(res.data.msg);
			        }
			      }).catch(e => {
			        console.error(e);
			        error(e.message);
			      });
			    }
			  };
			},
			clear(data){
				this.$confirm('正在删除该模式, 是否继续?', '提示', {
					         confirmButtonText: '确定',
					         cancelButtonText: '取消',
					         type: 'warning'
				 }).then(() => {
							   
												this.$http.post('/back/backconfig/del',{
													id:data.id,
												}).then(res => {
													if (res.data.code == 1) {
														this.$message({
															message: res.data.msg,
															type: 'success'
														});
														this.getlist()
													} else {
														this.$message.error(res.data.msg);
													}
												})
					         
					       }).catch(() => {
					         this.$message({
					           type: 'info',
					           message: '已取消'
					         });          
					       });
				
			},
			// 获取列表
			getlist(){
			this.product_id =this.$route.query.id
				this.$http.get( 'back/customconfig/list?mode_id=' + this.mode_id).then(res => {
					console.log(res)
					this.tableData = res.data.data
				})
			},
			handleChange(item){
				this.$router.push("/moshiguanli/tupianxuanze?name=" + item.name + '&id=' + item.id +'&product_id=' + this.product_id)
			},
			handlefabu(item){
				this.$confirm('此操作将修改线上陈展图片, 是否继续?', '提示', {
				         confirmButtonText: '确定',
				         cancelButtonText: '取消',
				         type: 'warning'
				       }).then(() => {
						   
											this.$http.post('/back/mode/release',{
												id:item.id,
											}).then(res => {
												if (res.data.code == 1) {
													this.$message({
														message: res.data.msg,
														type: 'success'
													});
												} else {
													this.$message.error(res.data.msg);
												}
											})
				         
				       }).catch(() => {
				         this.$message({
				           type: 'info',
				           message: '已取消'
				         });          
				       });
			},
			handleSizeChange(val) {
			    console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
				this.page=val;
				this.getlist();
			},
			goBack(){
				this.$router.go(-1)
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.video-avatar{
		width: 500px;
		height:300px;
		display: block;
		// left:30px;
	}
	.avatar-uploader  {
		width: 178px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.flex{
		display:flex;
	}
	.con-z{
		height:100vh;
		position: relative;
		.left{
			position: absolute;
			left: 0;
			top: 0;
			width: 10%;
			height: 100%;
			background-color: #fff;
			border-right: 1px solid rgba(0,0,0,.1);
		}
		.right{
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			.right-top{
				witdh:100%;
				background-color: #fff;
				font-weight: 600;
				font-size: 16px;
				padding: 16px 24px;
			}
			.right-bto{
				margin-top: 20px;
				padding: 0 20px ;
				overflow: auto;
				height: 90%;
				.search{
					padding: 24px;
					background-color: #fff;
					border-bottom: 1px solid #e8e8e8;
					.input-with-select{
						width:360px;
					}
					.shaixuan{
						color:#666666;
						.time{
							margin-top: 10px;
							height: 36px;
							line-height: 36px;
							.font{
								margin-right: 10px;
							}
						}
					}
				}
				.paixu{
					background-color: #fff;
					padding: 24px;
					font-size: 13px;
					display:flex;
					justify-content: space-between;
					border-bottom: 1px solid #e8e8e8;
				}
				.main{
					display: flex;
					flex-wrap: wrap;
					background-color: #fff;
					padding: 24px;
					border-bottom: 1px solid #e8e8e8;
					.main-item{
						width:230px;
						height:230px;
						margin: 0 15px;
						.main-btn{
							margin-top: 5px;
							display:flex;
							justify-content: space-between;
							font-size: 20px;
						}
					}
				}
			}
			
		}
	}
	
</style>